<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位问题</title>
		<style>
			/* 相对定位: 相对于父级元素进行定位，没有父级按照body进行定位，不脱离文档流
			   绝对定位：按照页面左侧顶角进行定位，在父级元素中，首先按照父级定位，脱离文档流
			*/
			.d{
				width:300px;
				height:300px;
				background-color: #c8257a;
				border-radius: 50%;
				posit ion: relative;
				position: absolute;
				top:0;
				left:0;
				
			}
			/* 需求：5个圆颜色都不同
			 类选择器使用问题： 常用
			                     html语法：class ="别名1 别名2 别名3....."
			                     css 语法：   .别名1{}
			 */
			.d1{
				background-color: #c863be;
			}
			.d2{
				background-color: #c8a3b6;
			}
			.d3{
				background-color: #8ca7c8;
			}
			.d4{
				background-color: #54afc8;
			}
			.d5{
				background-color: #95c8b6;
			}
		</style>
	</head>
	<body>
		<!-- 创建4个div 1个p-->
		<div class="d d1"></div>
		<div class="d d2"></div>
		<div class="d d3"></div>
		<p class="d d4"></p>
		<div class="d d5"></div>
	</body>
</html>